﻿<template>
  <div>
    <div class="back-headed">
      <router-link to="/shoppingCart" v-slot="{ navigate }" custom>
        <button @click="navigate"></button>
      </router-link>
      <h3>订单确认</h3>
    </div>
    <div class="order-info">
      <p>
        <img src="/img/icons/Logo2.png" alt="">
        <b>订单信息</b>
      </p>
      <ul>
        <li v-for="cart in carts" :key="cart.id">
          <img v-if="cart.productDto?.productPhoto" :src="cart.productDto?.productPhoto.productPhotoUrl" alt="">
          <p class="p-name">{{ cart.productDto.productName }}</p>
          <p class="p-price">&yen;{{ cart.productDto.productSale.salePrice }}</p>
          <span>x{{ cart.productNum }}</span>
        </li>
      </ul>
    </div>
    <div class="order-set">
      <p class="order-set-item p-remark">
        <span>备注</span>
        <input type="text" placeholder="选填 对本次交易的说明" v-model="remark">
      </p>
      <p class="order-set-item"><span>交货日期</span> <input type="date" name="" id="" v-model="deliveryDate"></p>
<!--      <p class="order-set-item"><span>开票人</span> -->
<!--        <select name="" id="" v-model="invoice">-->
<!--        <option :value="invoice.invoiceNo" v-for="invoice in invoices" :key="invoice.id">{{-->
<!--            invoice.invoiceNo-->
<!--          }}-->
<!--        </option>-->
<!--      </select>-->
<!--      </p>-->
      <p class="order-noti">
        <span>共{{ getTotalNum() }}件，合计：<b>&yen;{{ getTotalPrice() }}</b></span>
        <span>注：显示金额为成本金额，不含运费，实际结算价格，以审单后为准。</span>
      </p>
<!--      <router-link to="/orderDetail" v-slot="{ navigate }" custom>
        <p class="order-submit" @click="navigate">
          <button @click="onSubmitOrder">
            提交订单
          </button>
        </p>
      </router-link>-->
      <p class="order-submit">
        <button @click="onSubmitOrder">
          提交订单
        </button>
      </p>

    </div>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {addOrder, getInvoice, getOrderConfirmCarts} from "@/HttpRequests/OrderConfirmRequest";
import {useRouter} from "vue-router";
import { ElLoading, ElMessage } from 'element-plus'
import 'element-plus/es/components/loading/style/css'
import 'element-plus/es/components/message/style/css'

export default {
  setup() {
    const orderConfirmInfo = reactive({
      carts: [],
      invoices: [],
      invoice: '',
      remark: '',
      deliveryDate: '',

      /**
       * 设置交付日期，当前时间往后推一天及默认交付日期
       */
      setDeliveryDate: () => {
        // 创建时间对象
        let date = new Date();
        // 获取当前年份
        let year = date.getFullYear()
        // 获取当前月份
        // js中获取月份是从0开始的，0月即是1月
        let orgMonth = date.getMonth()
        let month = orgMonth + 1 < 10 ? '0' + (orgMonth + 1) : orgMonth + 1
        // 获取当前日期
        // 与月份信息一样，但钱日期也是从0开始，用时需+1
        let orgDay = date.getDate()
        let day = orgDay + 1 < 10 ? '0' + (orgDay + 1) : orgDay + 1
        // 返回标准的适配input date标签的日期格式
        orderConfirmInfo.deliveryDate = `${year}-${month}-${day}`
      },

      /**
       * 获取总价
       * @returns {number}
       */
      getTotalPrice: () => {
        let totalPrice = 0
        // 循环购物车，获取总价
        orderConfirmInfo.carts.forEach(c => {
          totalPrice += c.productNum * c.productDto.productSale.salePrice
        })
        return totalPrice
      },
      getTotalNum: () => {
        let totalNum = 0
        // 循环购物车，获取总的数量
        orderConfirmInfo.carts.forEach(c => {
          totalNum += c.productNum
        })
        return totalNum
      },
      onSubmitOrder: async () => {
        const loading = ElLoading.service({
          lock: true,
          text: '订单提交中...',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        try {
          const res = await addOrder({
            remark: orderConfirmInfo.remark,
            invoice: orderConfirmInfo.invoice,
            deliveryDate: orderConfirmInfo.deliveryDate,
          })
          localStorage['orderNo'] = res

          setTimeout(() => {
            loading.close()
            ElMessage({
              type: 'success',
              message: '支付成功！',
              duration: 1000,
              onClose: () => {
                router.push('/main')
              }
            })
          }, 2000)
        } catch (error) {
          loading.close()
          ElMessage.error('订单提交失败，请重试')
        }
      }
    })
    const router = useRouter();
    onMounted(async () => {
      orderConfirmInfo.invoices = await getInvoice()
      orderConfirmInfo.carts = await getOrderConfirmCarts()
      orderConfirmInfo.setDeliveryDate()
    })
    return {...toRefs(orderConfirmInfo)}
  }
}
</script>

<style lang="scss" scoped>
.back-headed {
  height: 46px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px;
  position: relative;
  background-color: #f8f8f8;

  button {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 22px;
    height: 22px;
    background-color: #aaa;
    border-radius: 22px;
    background-image: url("../../public/img/icons-png/back-white.png");
    border: 0 none;
    background-position: center;
    background-repeat: no-repeat;
    outline: none;
  }

  h3 {
    width: 100%;
    text-align: center;
    height: 45px;
    line-height: 45px;
    font-size: 15px;
    color: #333;
  }
}

.order-info {
  background-color: #fff;

  p {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;

    img {
      width: 26px;
      height: 26px;
      vertical-align: middle;
    }

    b {
      font-size: 14px;
      margin-left: 10px;
      color: #333;
    }
  }

  ul {
    padding-bottom: 7px;
    background: #fff url() -7px bottom repeat-x;

    li {
      padding: 10px 16px 10px 100px;
      height: 91px;
      position: relative;
      border-bottom: 1px solid #ddd;
      background-color: #fff;

      img {
        width: 66px;
        height: 66px;
        position: absolute;
        left: 10px;
        background-color: #ccc;
        top: 16px;
      }

      p {
        height: 25px;
        line-height: 25px;
      }

      .p-name {
        font-size: 13px;
        font-weight: bolder;
      }

      span {
        font-size: 12px;
        position: absolute;
        right: 30px;
        bottom: 6px;
      }
    }
  }
}

.order-set {
  background-color: #fff;

  p {
    padding: 6px 0;
    margin: 0 10px;
    border-bottom: 1px solid #ddd;
  }

  .p-price {
    color: crimson;
    font-size: 14px;
    font-weight: bolder;
  }

  p.order-set-item {
    height: 40px;
    font-size: 13px;
    line-height: 40px;

    &.p-remark {
      input {
        color: #666;
        font-size: 12px;
        border: none 0;
        outline: none;
      }
    }

    span {
      display: inline-block;
      width: 80px;
      color: #666;
    }

    input,
    select {
      padding: 0 3px;
      box-sizing: border-box;
      border: 0 none;
      background-color: #ddd;
      border-radius: 3px;
      color: #666;
      width: 136px;
      outline: none;
      height: 26px;
    }
  }

  p.order-noti {
    line-height: 2;

    span {
      font-size: 13px;
      font-weight: bolder;
      display: block;
    }

    span:nth-child(1) {

      color: #666;

      b {
        color: crimson;
        font-size: 14px;
      }
    }

    span:nth-child(2) {
      color: crimson;
    }
  }

  p.order-submit {
    button {
      width: 100%;
      box-sizing: border-box;
      margin: 10px 0;
      height: 36px;
      border: 0 none;
      background-color: #e93b3d;
      border-radius: 5px;
      color: #fff;
      font-weight: bolder;
      font-size: 15px;
    }
  }

  p:last-child {
    border-bottom: 0 none;
  }
}
</style>
